<template>
  <div class="capital-situation">
    <div class="initial-ituation">
      <div class="situation-name">
        <div
          class="text-til"
          @click="
            cashButterfly({
              nam: '一码通',
              one: '收款笔数',
              two: '收款金额',
              three: '退款笔数',
              four: '退款金额',
            })
          "
        >
          一码通
        </div>
        <div class="ckground-bar"></div>
      </div>
      <div class="daily-receipts">
        <div class="receivable-pen">
          <div class="check"></div>
          <div class="check-cockpit">
            <div class="property-tax">{{ codeData.skbs }}</div>
            <div class="house-duty">收款笔数</div>
          </div>
          <div class="cabin">
            <div>笔</div>
            <div
              :class="
                parseFloat(codeData.skbsTb) > 0 ? 'indicr-ratio' : 'indicr-red'
              "
            >
              <div class="sales-ratio" v-show="codeData.skbsTb">
                <svgBoot v-if="Number(codeData.skbsTb) > 0" /><svgTop v-else />
              </div>
              <div v-show="codeData.skbsTb">{{ codeData.skbsTb }}</div>
            </div>
          </div>
        </div>
        <div class="receivable-pen">
          <div class="check"></div>
          <div class="check-cockpit">
            <div class="property-tax">{{ codeData.skje }}</div>
            <div class="house-duty">收款金额</div>
          </div>
          <div class="cabin">
            <div>万元</div>
            <div
              :class="
                parseFloat(codeData.skjeTb) > 0 ? 'indicr-ratio' : 'indicr-red'
              "
            >
              <div class="sales-ratio" v-show="codeData.skjeTb">
                <svgBoot v-if="Number(codeData.skjeTb) > 0" /><svgTop v-else />
              </div>
              <div v-show="codeData.skjeTb">{{ codeData.skjeTb }}</div>
            </div>
          </div>
        </div>
        <div class="receivable-pen">
          <div class="refund"></div>
          <div class="check-cockpit">
            <div class="property-tax">{{ codeData.tkbs }}</div>
            <div class="house-duty">退款笔数</div>
          </div>
          <div class="cabin">
            <div>笔</div>
            <div
              :class="
                parseFloat(codeData.tkbsTb) > 0 ? 'indicr-ratio' : 'indicr-red'
              "
            >
              <div v-show="codeData.tkbsTb" class="sales-ratio">
                <svgBoot v-if="Number(codeData.tkbsTb) > 0" /><svgTop v-else />
              </div>
              <div v-show="codeData.tkbsTb">{{ codeData.tkbsTb }}</div>
            </div>
          </div>
        </div>
        <div class="receivable-pen">
          <div class="refund"></div>
          <div class="check-cockpit">
            <div class="property-red">{{ codeData.tkje }}</div>
            <div class="house-duty">退款金额</div>
          </div>
          <div class="cabin">
            <div>万元</div>
            <div
              :class="
                parseFloat(codeData.tkjeTb) > 0 ? 'indicr-ratio' : 'indicr-red'
              "
            >
              <div class="sales-ratio" v-show="codeData.tkjeTb">
                <svgBoot v-if="Number(codeData.tkjeTb) > 0" /><svgTop v-else />
              </div>
              <div v-show="codeData.tkjeTb">{{ codeData.tkjeTb }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rechargeable-card">
      <div class="situation-name">
        <div
          class="text-til"
          @click="
            cashButterfly({
              nam: '充值卡',
              one: '充值金额',
              two: '消费金额',
              three: '充值卡余额',
              four: '消费转化率',
            })
          "
        >
          充值卡
        </div>
        <div class="ckground-bar"></div>
      </div>

      <div class="daily-receipts receip-top">
        <div class="receivable-pen">
          <div class="charge-balance"></div>
          <div class="card-amount">
            <div class="card-yuan">
              <div class="card-text">{{ rechargeableDa.czje }}</div>
              <div class="unit-text">万元</div>
            </div>
            <div class="card-yuan">
              <div class="balance-yuan">充值金额</div>
              <div
                :class="[
                  parseFloat(rechargeableDa.xfjeTb) > 0
                    ? 'monetary-unit'
                    : 'monetary-red',
                ]"
              >
                <div v-show="rechargeableDa.czjeTb" class="sales-ratio">
                  <svgBoot v-if="Number(rechargeableDa.czjeTb) > 0" /><svgTop
                    v-else
                  />
                </div>
                <div v-show="rechargeableDa.czjeTb">
                  {{ rechargeableDa.czjeTb }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="receivable-pen">
          <div class="ption-eck"></div>
          <div class="card-amount">
            <div class="card-yuan">
              <div class="card-text">{{ rechargeableDa.xfje }}</div>
              <div class="unit-text">万元</div>
            </div>
            <div class="card-yuan">
              <div class="balance-yuan">消费金额</div>
              <div
                :class="[
                  parseFloat(rechargeableDa.xfjeTb) > 0
                    ? 'monetary-unit'
                    : 'monetary-red',
                ]"
              >
                <div v-show="rechargeableDa.xfjeTb" class="sales-ratio">
                  <svgBoot v-if="Number(rechargeableDa.xfjeTb) > 0" /><svgTop
                    v-else
                  />
                </div>
                <div v-show="rechargeableDa.xfjeTb">
                  {{ rechargeableDa.xfjeTb }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="receivable-pen">
          <div class="balance-eck"></div>
          <div class="card-amount">
            <div class="card-yuan">
              <div class="card-red">{{ rechargeableDa.czkye }}</div>
              <div class="unit-text">万元</div>
            </div>
            <div class="card-yuan">
              <div class="balance-yuan">充值卡余额</div>
              <div
                :class="[
                  parseFloat(rechargeableDa.czkyeTb) > 0
                    ? 'monetary-unit'
                    : 'monetary-red',
                ]"
              >
                <div v-show="rechargeableDa.czkyeTb" class="sales-ratio">
                  <svgBoot v-if="Number(rechargeableDa.czkyeTb) > 0" /><svgTop
                    v-else
                  />
                </div>
                <div v-show="rechargeableDa.czkyeTb">
                  {{ rechargeableDa.czkyeTb }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="receivable-pen">
          <div class="ption-eck"></div>
          <div class="card-amount">
            <div class="card-yuan">
              <div class="card-text">{{ rechargeableDa.xfzhl }}</div>
              <div class="unit-text">%</div>
            </div>
            <div class="card-yuan">
              <div class="balance-yuan">消费转化率</div>
              <div
                :class="[
                  parseFloat(rechargeableDa.xfzhlTb) > 0
                    ? 'monetary-unit'
                    : 'monetary-red',
                ]"
              >
                <div v-show="rechargeableDa.xfzhlTb" class="sales-ratio">
                  <svgBoot v-if="Number(rechargeableDa.xfzhlTb) > 0" /><svgTop
                    v-else
                  />
                </div>
                <div v-show="rechargeableDa.xfzhlTb">
                  {{ rechargeableDa.xfzhlTb }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="receivables">
      <div class="situation-name">
        <div
          class="text-til"
          @click="
            cashButterfly({
              nam: '应收款',
              one: '本期新增',
              two: '本期减少',
              three: '应收账款余额',
              four: '逾期金额',
            })
          "
        >
          应收款
        </div>
        <div class="ckground-bar"></div>
      </div>

      <div class="receivable-content">
        <div class="ctioncontent">
          <div class="receive-payment">
            <div class="added-in"></div>
            <div class="added-period">
              <div class="perio-adfd">
                <span class="added-num">{{ receivableDat.bqxz }}</span
                ><span>万元</span>
              </div>
              <div class="perio-adfd">
                <span class="added-units">本期新增</span> <span></span>
              </div>
            </div>
          </div>
          <div class="receive-payment">
            <div class="period-in"></div>
            <div class="added-period">
              <div class="perio-adfd">
                <span class="added-red">{{ receivableDat.bqjs }}</span
                ><span>万元</span>
              </div>
              <div class="perio-adfd">
                <span class="added-units">本期减少</span><span></span>
              </div>
            </div>
          </div>
          <div class="receive-payment">
            <div class="resent-tax"></div>
            <div class="added-period">
              <div class="perio-adfd">
                <span class="added-num">{{ receivableDat.yszkye }}</span
                ><span>万元</span>
              </div>
              <div class="perio-adfd">
                <span class="added-units">应收账款余额</span><span></span>
              </div>
            </div>
          </div>
          <div class="receive-payment">
            <div class="past-due"></div>
            <div class="added-period">
              <div class="perio-adfd">
                <span class="added-red">{{ receivableDat.yqje }}</span
                ><span>万元</span>
              </div>
              <div class="perio-adfd">
                <span class="added-units">逾期金额</span><span></span>
              </div>
            </div>
          </div>
        </div>
        <div id="collectionChart" ref="collectionChart"></div>
      </div>
    </div>
  </div>
  <Detailspopup
    :initData="initData"
    @close-details="receivables = false"
    v-if="receivables"
  />
  <Rechargeable @close-area="payment = false" v-if="payment" :title="text" />
  <turnoverRate
    :initData="initData"
    @close-details="turnoverRateOFF = false"
    v-if="turnoverRateOFF"
  />
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
import Detailspopup from "./detailspopup.vue";
import Rechargeable from "./rechargeable.vue";
import turnoverRate from "./turnoverRate.vue";
import svgTop from "./svgTop.vue";
import svgBoot from "./svgBoot.vue";
import { postRequest, InitReceivables } from "../utils/request";
const props = defineProps({
  textName: {
    type: String,
    default: "月",
  },
});
watch(
  () => props.textName,
  (newValue, oldValue) => {
    oneCodeData(newValue); //一码通数据更新
    rechargeableCard(newValue); //充值卡数据更新
    updateCenterAndZoom(); //应收账款数据更新
  }
);
let collectionChart = ref(null);
let receivables = ref(false); //详情框
let initData = ref({});
let payment = ref(false); //充值框
let turnoverRateOFF = ref(false); //应收款周转率
let codeData = ref({
  skbs: 0,
  skbsTb: 0,
  skje: 0,
  skjeTb: 0,
  tkbs: 0,
  tkbsTb: 0,
  tkje: 0,
  tkjeTb: 0,
}); //一码通
let rechargeableDa = ref({
  czje: 0,
  czjeTb: 0,
  xfje: 0,
  xfjeTb: 0,
  czkye: 0,
  czkyeTb: 0,
  xfzhl: 0,
  xfzhlTb: 0,
}); //充值卡
let receivableDat = ref({
  bqjs: 0,
  bqxz: 0,
  yszkye: 0,
  yqje: 0,
}); //应收账款
let text = ref({
  name: "",
  one: "",
  two: "",
  three: "",
  four: "",
});
let electricity = (dateDa, moneyDa, overdueDa, turnoverDa) => {
  let option = {
    title: {
      subtext: "单位 : 万元",
      subtextStyle: {
        color: "#FFFFFF", // 设置副标题颜色
        fontSize: 14, // 设置副标题大小
      },
      top: -8,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "#0d62eca9",
      textStyle: {
        color: "#fff", // 设置字体颜色为黄色
        fontSize: 12,
      },
      borderWidth: 0, // 设置边框宽度为 2px
    },
    legend: {
      data: ["余额", "逾期金额", "应收账款周转率"],
      left: "right", // 设置图例在右侧
      top: 5, // 设置图例垂直居中
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: "#FFFFFF", // 设置图例文字颜色
        fontSize: 14, // 设置图例文字大小
      },
    },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "2%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: dateDa,
      axisLabel: {
        color: "#FFFFFF", // 设置 X 轴标签颜色
        fontSize: 12, // 设置 X 轴标签字体大小
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#fff", // 设置底部轴线（X 轴）颜色为橙色
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#FFFFFF", // 设置 X 轴标签颜色
        fontSize: 12, // 设置 X 轴标签字体大小
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#ADADAD",
        },
      },
    },
    series: [
      {
        name: "余额",
        type: "bar",
        barWidth: 14,
        data: moneyDa,
        barGap: "30%",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
          color: "#F39700",
          borderColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255,255,255, 1)",
              },
              {
                offset: 1,
                color: "rgba(255,255,255, 0)",
              },
            ],
          },
        },
      },
      {
        name: "逾期金额",
        type: "bar",
        barWidth: 14,
        data: overdueDa,
        barGap: "30%",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
          color: "#00FFFF",
          borderColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255, 255, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(255,255,255, 0)",
              },
            ],
          },
        },
      },
      {
        name: "应收账款周转率",
        type: "line",
        triggerEvent: true, // 新增这个配置
        symbolSize: 14, //
        // yAxisIndex: 1,
        lineStyle: {
          color: "#FAD508",
          width: 5,
        },
        smooth: true,
        data: turnoverDa,
      },
    ],
  };
  const chart = echarts.init(collectionChart.value);
  chart.setOption(option);
  chart.on("click", function (params) {
    if (params.seriesType == "bar") {
      initData.value = params;
      receivables.value = true;
    } else {
      initData.value = params;
      turnoverRateOFF.value = true;
    }
  });
};
let cashButterfly = (val) => {
  text.value = val;
  payment.value = true;
};
let oneCodeData = (val) => {
  postRequest("/screen/query/getCwYmt", val)
    .then(({ code, data }) => {
      if (code == 200 && data) {
        codeData.value = data;
      } else {
        for (const key in codeData.value) {
          codeData.value[key] = 0;
        }
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};
let rechargeableCard = (val) => {
  //充值卡
  postRequest("/screen/query/getCwCzk", val)
    .then(({ code, data }) => {
      if (code == 200 && data) {
        rechargeableDa.value = data;
      } else {
        for (const key in rechargeableDa.value) {
          rechargeableDa.value[key] = 0;
        }
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};
let updateCenterAndZoom = () => {
  //应收款
  InitReceivables("/screen/query/getCwYsk")
    .then(({ code, data }) => {
      if (code == 200 && data && data.length > 0) {
        let dateDa = []; //日期
        let moneyDa = []; //余额
        let overdueDa = []; //逾期
        let turnoverDa = []; //周转率
        data.forEach((item) => {
          dateDa.push(item.rq);
          moneyDa.push(item.yszkye);
          overdueDa.push(item.yqje);
          turnoverDa.push(item.yzzkzzl);
        });
        electricity(dateDa, moneyDa, overdueDa, turnoverDa);
      } else {
        electricity([], [], [], []);
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });

  InitReceivables("/screen/query/getCwYsk", "年")
    .then(({ code, data }) => {
      if (code == 200 && data) {
        receivableDat.value = data[0];
      } else {
        for (const key in receivableDat.value) {
          receivableDat.value[key] = 0;
        }
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};
onMounted(() => {
  oneCodeData(props.textName); //一码通数据更新
  rechargeableCard(props.textName); //充值卡数据更新
  updateCenterAndZoom(); //应收账款数据更新
});
</script>
<style lang="less" scoped>
.capital-situation {
  width: 29vw;
  height: 90vh;
  margin-right: 0.3vw;
  margin-top: 0.1vh;
  overflow: hidden;
  box-sizing: border-box;
  .initial-ituation {
    height: 22vh;
    width: 29vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.3vh;
    padding: 0.3vh 0.2vw;
  }
  .rechargeable-card {
    height: 21vh;
    width: 29vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4vh;
  }
  .receip-top {
    margin-top: 0.5vh;
  }
  .daily-receipts {
    width: 29vw;
    height: 16.9vh;
    background: #2098cc33;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: space-between;
    .receivable-pen {
      width: 13.4vw;
      height: 7vh;
      background: #2098cc25;
      border: 1px solid #588ec35d;
      margin-top: 0.45vh;
      display: flex;
      justify-content: space-around;
      align-items: center;
   
      .check {
        width: 2.5vw;
        height: 5vh;
        background: url("../assets/check.png") no-repeat;
        background-size: 100% 100%;
        background-position: center;
        margin-top: 0.3vh;
        margin-left: 0.5vw;
      }
      .ption-eck {
        width: 2.5vw;
        height: 5vh;
        background: url("../assets/use.png") no-repeat;
        background-size: 100% 100%;
        background-position: center;
        margin-top: 0.3vh;
      }
      .balance-eck {
        width: 2.5vw;
        height: 5vh;
        background: url("../assets/tobe.png") no-repeat;
        background-size: 100% 100%;
        background-position: center;
        margin-top: 0.3vh;
      }
      .refund {
        width: 2.5vw;
        height: 4vh;
        background: url("../assets/refund.png") no-repeat;
        background-size: 100% 100%;
        background-position: center;
        margin-top: 0.3vh;
        margin-left: 0.5vw;
      }
      .check-cockpit {
        width:5.5vw;
        height: 6vh;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        font-family: Dream Han Sans CN;
        font-weight: normal;
        text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
        opacity: 0.97;
        transform: translateY(-0.3vh);
        margin-left: 1.3vw;
        .property-tax {
          font-size: 1.2vw;
          color: #5aff7d;
          font-weight: 700;
        }
        .property-red {
          font-size: 1.2vw;
          color: #ff4302;
          font-weight: 700;
        }
        .house-duty {
          font-size: 0.8vw;
          color: #ffffff;
        }
      }
      .cabin {
        width: 3vw;
        height: 6vh;
        font-family: Dream Han Sans CN;
        font-weight: normal;
        font-size: 0.7vw;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-right: 0.8vw;
        .indicr-ratio {
          display: flex;
          justify-content: space-around;
          align-items: center;
          color: #5aff7d;
        }
      }
      .indicr-red {
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #ff4302;
      }
      // .indicator-ratio {
      //   width: 0.9vw;
      //   height: 1.5vh;
      //   background: url("../assets/rate.png") no-repeat;
      //   background-size: 100% 100%;
      //   background-position: center;
      // }
      // .drawback {
      //   width: 0.9vw;
      //   height: 1.5vh;
      //   background: url("../assets/drawback.png") no-repeat;
      //   background-size: 100% 100%;
      //   background-position: center;
      //   margin-top: 0.3vh;
      // }
      .charge-balance {
        width: 3vw;
        height: 6vh;
        background: url("../assets/echar.png") no-repeat;
        background-size: 100% 100%;
        background-position: center;
        margin-top: 0.3vh;
      }
      .card-amount {
        width: 10vw;
        height: 6vh;
        font-family: Dream Han Sans CN;
        font-weight: normal;
        font-size: 0.65vw;
        color: #ffffff;
        padding: 0 0.8vw;
        .card-yuan {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          padding: 0 0.4vw;
          .card-text {
            font-size: 1.2vw;
            color: #5aff7d;
            font-weight: 700;
          }
          .card-red {
            font-size: 1.2vw;
            color: #ff4302;
            font-weight: 700;
          }
          .unit-text {
            margin-left: 1vw;
            transform: translateY(-0.3vh);
          }
          .balance-yuan {
            font-size: 0.8vw;
            color: #ffffff;
          }
          .monetary-unit {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 0.6vw;
            color: #5aff7d;
          }
          .monetary-red {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 0.6vw;
            color: #ff4302;
          }
        }
      }
    }
  }
  .receivables {
    height: 46.2vh;
    width: 29vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    // margin-top: 0.7vh;
    .receivable-content {
      width: 100%;
      height: 41.6vh;
      background: #2098cc33;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // padding-top: 1vh;
      .ctioncontent {
        width: 29vw;
        height: 16vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.52vw;
        transform: translateY(-1vh);
        .receive-payment {
          width: 13.4vw;
          height: 7vh;
          background: #2098cc25;
          border: 1px solid #588ec35d;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 0.4vw;
          .added-in {
            width: 2.5vw;
            height: 4vh;
            background: url("../assets/added.png") no-repeat;
            background-size: 100% 100%;
            background-position: center;
            margin-top: 0.3vh;
          }
          .period-in {
            width: 2.5vw;
            height: 4vh;
            background: url("../assets/period.png") no-repeat;
            background-size: 100% 100%;
            background-position: center;
            margin-top: 0.3vh;
          }
          .resent-tax {
            width: 2.5vw;
            height: 4vh;
            background: url("../assets/tax.png") no-repeat;
            background-size: 100% 100%;
            background-position: center;
            margin-top: 0.3vh;
          }
          .past-due {
            width: 2.5vw;
            height: 4vh;
            background: url("../assets/due.png") no-repeat;
            background-size: 100% 100%;
            background-position: center;
            margin-top: 0.3vh;
          }
          .added-period {
            width: 9.5vw;
            height: 6vh;
            font-family: Dream Han Sans CN;
            font-weight: normal;
            font-size: 0.65vw;
            color: #ffffff;
            opacity: 0.97;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 0 0.9vw;
            .perio-adfd {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
            .added-units {
              font-size: 0.8vw;
            }
            .added-num {
              font-size: 1.2vw;
              color: #5aff7d;
              margin-right: 0.8vw;
              font-weight: 700;
            }
            .added-red {
              font-size: 1.2vw;
              color: #ff4302;
              margin-right: 0.8vw;
              font-weight: 700;
            }
          }
        }
      }
      #collectionChart {
        width: 29vw;
        height: 23vh;
      }
    }
  }

  .situation-name {
    width: 100%;
    height: 4vh;
    font-family: DreamHanSansCN, DreamHanSansCN;
    font-weight: 500;
    font-size: 1.1vw;
    color: #ffffff;
    text-align: left;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    .text-til {
      width: 100%;
      transform: translateY(0.7vh);
      padding-left: 0.5vw;
    }
    .ckground-bar {
      height: 1.3vh;
      width: 100%;
      background: url("../assets/biao.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }
}
</style>
